<template>
	<view class="pageBox">
		<Header :name="false" :title="'购物车'"></Header>
		<view class="carlist">
			<view class="emptyBox" v-if="carList.length==0">
				<image class="emptyIcon" src="../../../static/empty.png" mode="widthFix"></image>
				<view class="emptyText">
					购物车为空!
				</view>
			</view>
			<view class="carListItem" v-for="(carItem,index) in carList" >
				<view class="title">
					<view class="iconfont icon-dianpu"></view>
					<!-- 店铺名称 -->
					<view class="storeName">{{carItem.name}}</view>
				</view>
				<view class="content" v-for="(orderItem,key) in carItem.cartListVo" >
					<view class="selectBox" @click="clickSelect(orderItem,key)">
						<view v-if="orderItem.selected" class="iconfont icon-icon_right"></view>
					</view>
					<view class="main" @click="gotoDetails(orderItem.productId)" @longpress="longpress(orderItem.id)">
						<view class="shadowBox" v-if="showShadow && longPressIndex==orderItem.id">
							<view class="deleteBtn" style="background-color: #FFF;color: #333333;"
								@click.stop="deleteItem(orderItem.id,'取消')">
								取消
							</view>
							<view class="deleteBtn" @click.stop="deleteItem(orderItem,'删除',index,key)">
								删除
							</view>
						</view>
						<image class="pic" :src="orderItem.productIcon" mode="widthFix"></image>
						<view class="mainRight">
							<!-- 商品名称 -->
							<view class="shopName">{{orderItem.productName}}</view>
							<view class="priceBox">
								<!-- 价格 -->
								<view class="price">
									<span class="priceIcon">￥</span>
									{{orderItem.price}}
								</view>
								<!-- 商品数量步进器 -->
								<!-- orderItem.buyCount -->
								<view class="numberBox" @tap.stop.prevent>
									<u-number-box v-model="orderItem.buyCount" @change="valChange($event,orderItem)">
										<view slot="minus" class="minus">
											<view class="minus">
												<view class="iconfont iconStyle icon-jianhao"></view>
											</view>
										</view>
										<input slot="input" type="buyCount" class="numberInput" @input="positiveInteger($event,orderItem)"
											v-model="orderItem.buyCount">
										<view slot="plus" class="plus">
											<view class="plus">
												<view class="iconfont iconStyle icon-zengjia"></view>
											</view>
										</view>
									</u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submitBox">
			<view class="selectBox" @click="allSelect">
				<view v-if="AllActive" class="iconfont icon-icon_right"></view>
			</view>
			<span @click="allSelect" style="margin-right: 15rpx;color:#333333;font-size:28rpx">全选</span>

			<view style="color:#333333;font-size: 28rpx">
				已选<span style="color:#D42A1B">{{count}}</span>件，合计：
				<span style="color:#D72A2A;font-size:24rpx">￥</span>
				<span style="color:#D72A2A;font-size:38rpx;font-weight: bold;">{{sum}}</span>
			</view>
			
			<view class="submit" @click="submitOrder">提交订单</view>
		</view>
		<view class="bottomBox"></view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				sum: 0,
				carList: [
					// {
					// 	cartListVo: [{
					// 		id: 1,
					// 		buyCount: 1,
					// 		price: 18,
					// 		title: '高级组合粉丝3公斤',
					// 		selected:false,
					// 	}],
					// 	name: '冒丰数字',
					// 	merchantId: 1
					// }
				],
				AllActive: false,
				count:0,

				submitForm: [],

				showShadow: false,
				longPressIndex: '',
			}
		},
		
		created(){
			this.carList=[]
			this.getList()
			this.getSum()
			this.AllActive=false
		},
		components: {
			Header
		},
		methods: {
			
			positiveInteger(value,orderItem){
				console.log(value)
				let buyCount = orderItem.buyCount
				this.$nextTick(() => {
					// let oldValue=value
					// orderItem.buyCount = buyCount.replace(/\D/g, '')
					// if(this.form.buyCount<0 || this.form.buyCount==0){
					// 	// this.form.buyCount=1
					// }else if(this.form.buyCount>this.data.totalNum){
					// 	this.form.buyCount=this.data.totalNum
					// }
				});
			},
			// 跳转商品详情
			gotoDetails(pid) {
				uni.navigateTo({
					url: '/pages/index/shopDate/shopDate?id=' + pid
				})
			},
			deleteItem(orderItem, type,index,key) {
				switch (type) {
					case '取消':
						this.showShadow = false
						this.longPressIndex = ''
						
						break;
					case '删除':
						this.$api.request('manage/cart/'+orderItem.id,'delete').then(res=>{
							if(res.code==200){
								orderItem.selected=false
							    this.carList[index].cartListVo.splice(key,1)
								this.carList.forEach((item,index)=>{
									if(item.cartListVo.length==0){
										this.carList.splice(index,1)
									}
								})
								console.log(this.carList)
						
								uni.showToast({
									title:'删除成功',
								})
								this.getSum()
								
								
							}
						})
						this.showShadow = false
						this.longPressIndex = ''
						

						break;
				}


			},
			// 长按显示删除
			longpress(id) {

				this.showShadow = true
				this.longPressIndex = id
				console.log(this.showShadow, this.longPressIndex)
			},
			getList() {
				this.$api.request('manage/cart/list', 'get').then(res => {
					res.data.forEach(item => {
						item.cartListVo.forEach(key => {
							key.selected = false
						})
					})
					
					this.carList =    JSON.parse(JSON.stringify(res.data)) 
					
					console.log(this.carList)
					
				})
			},
			getSum() {
				this.sum = 0
				this.count=0
				console.log(this.carList)
				this.carList.forEach(item => {
					item.cartListVo.forEach(key => {
						if (key.selected == true) {
							this.count+=1
							this.sum = this.sum + Number(key.price) * key.buyCount
						}
					})
				})
				this.sum = this.sum.toFixed(2)


			},
			valChange(e, item) {
				item.buyCount = e.value
				this.getSum()
			},
			getSubmitForm() { //更新购物车已选择的数据
				this.submitForm = []
				this.carList.forEach(item => {
					item.cartListVo.forEach(key => {
						if (key.selected == true) {
							this.submitForm.push({
								id: key.id,
								buyCount: key.buyCount,
								price: key.price,
								productIcon: key.productIcon,
								productName: key.productName,
								name: item.name,
								merchantId: item.merchantId,
								productId:key.productId
							});
						}
					})
				})
			},
		async	submitOrder() {
			if (this.submitForm.length == 0) {
				uni.showToast({
					title: '请先选择商品',
					icon: 'error'
				})
				return
			}
				 this.submitForm.forEach(item=>{
					 item.cartId=item.id
				 })
				 
		let res = await	this.$api.request('pay/order/create', 'post',{scence:1,orderType:1,shoppingCartList: this.submitForm})
		console.log(res)
				if(res.code=='200'){
					this.getSubmitForm()
					uni.navigateTo({
						url: '/pages/shop/showCar/carBuyShop?carData=' + JSON.stringify(this.submitForm)+'&dataId='+res.data
					})
				}
				//提交时如果用户更改数量,确保数据最新
				
				
			},
			myIncludes(id) {
				//判断数组中的每个对象的id的值是否重复存在
				if (this.submitForm.length == 0) {
					return false
				}
				let count = 0
				for (let i = 0; i < this.submitForm.length; i++) {
					if (this.submitForm[i].id == id) {
						count += 1
					}
				}
				return count == 1 || count > 1
			},
			clickSelect(val) {
				console.log(1111,val)
				val.selected = !val.selected
				if (this.myIncludes(val.id)) { //已选择再次点击
					// //取消选择 filter()方法用于过滤已选择的商品，
					this.submitForm = this.submitForm.filter(item => {
						//生成新的数组,过滤重复的元素
						return item.id != val.id
					});
				} else { //未选择 点击
					this.submitForm.push({
						id: val.id,
						buyCount: val.buyCount,
						price: val.price,
						productIcon: val.productIcon,
						productName: val.productName,
						productId:val.productId
					});
				}
				console.log('选择数据', this.submitForm)
				this.getSum()
			},
		

			allSelect() { //全选
				if(this.carList.length==0){
					uni.showToast({
						title:'暂无商品',
						icon:'error'
					})
					return
				}
				this.AllActive = !this.AllActive
				if (this.AllActive) { //this.AllActive==true
					this.carList.forEach(item => {
						item.cartListVo.forEach(key => {

							if (!this.myIncludes(key.id)) {
								//判断 数组里有没有这个id,有了就不用重复添加进去
								this.submitForm.push({
									id: key.id,
									buyCount: key.buyCount,
									price: key.price,
									url: key.productIcon,
									title: key.productName,
									productId:key.productId,
									
									
									
								})
							}
							key.selected = true
						})

					})
				} else {
					this.submitForm.splice(0, this.submitForm.length)
					this.carList.forEach(item => {
						item.cartListVo.forEach(key => {
							key.selected = false
						})
					})
				}
				this.getSum()
				console.log('全选后的数据', this.submitForm)
			}
		}
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		height: 100vh;
		background-color: #eaeaea;

	}

	// 步进器样式start
	.minus {
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		border: 1px solid #DCDCDC;
		border-radius: 18rpx 0rpx 0rpx 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: none;
	}

	.iconStyle {

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.numberInput {
		width: 60rpx;
		height: 38rpx;
		font-size: 28rpx;
		background: #FFFFFF;
		border: 1px solid #DCDCDC;
		text-align: center;
		box-sizing: border-box;
		pointer-events: none;
	}

	.plus {
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		border: 1px solid #DCDCDC;
		border-left: none;
		border-radius: 0rpx 18rpx 18rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bottomBox{
		position: fixed;
		bottom: 100rpx;
		height: 45rpx;
		width: 100%;
		background-color: #fff;
	}

	.submitBox {
		
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 140rpx;
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		
		

		.selectBox {
			position: relative;
			width: 30rpx;
			height: 30rpx;
			background: #FFFFFF;
			border: 2px solid #DCDCDC;
			border-radius: 50%;
			box-sizing: border-box;
			margin-right: 15rpx;




			.icon-icon_right {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30rpx;
				height: 30rpx;
				font-size: 19rpx;
				color: #fff;
				background-color: #D42A1B;
				border-radius: 50%;
			}
		}

		.submit {
			margin-left: auto;
			height: 60rpx;
			width: 160rpx;
			background: #D72A2A;
			border-radius: 100rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
		}
	}




	.carlist {
		display: flex;
		flex-direction: column;
		padding: 24rpx 20rpx 0 20rpx;
		box-sizing: border-box;
		overflow: scroll;
		height: calc(100vh - 370rpx);


		.carListItem {
			background-color: #fff;
			border-radius: 10rpx;
			width: 710rpx;
			background: #FFFFFF;
			padding: 20rpx 23rpx 33rpx 13rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			&:last-child{
				margin-bottom: 60rpx;
			}
			.title {
				display: flex;
				margin-bottom: 24rpx;
				align-items: center;

				.icon-dianpu {
					font-size: 28rpx;
					margin-right: 16rpx;
				}

				.storeName {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
				}
			}

			.content {
				display: flex;
				align-items: center;
				margin-bottom: 39rpx;
			
				&:nth-last-child(1) {
					margin-bottom: 0;
				}


				.selectBox {
					position: relative;
					width: 30rpx;
					height: 30rpx;
					background: #FFFFFF;
					border: 2px solid #DCDCDC;
					border-radius: 50%;
					box-sizing: border-box;
					margin-right: 22rpx;
				

					.icon-icon_right {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						display: flex;
						justify-content: center;
						align-items: center;
						width: 30rpx;
						height: 30rpx;
						font-size: 19rpx;
						color: #fff;
						background-color: #D42A1B;
						border-radius: 50%;
					}
				}

				.main {
					display: flex;
					flex: 1;
					position: relative;

					.shadowBox {
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: space-around;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, 0.3);

						.deleteBtn {
							color: #fff;
							font-size: 24rpx;
							border-radius: 50%;
							background-color: #D72A2A;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.pic {
						width: 187rpx;
						background: #F5F5F5;
						border-radius: 10rpx;
						margin-right: 38rpx;
					}

					.mainRight {
						flex: 1;
						padding: 18rpx 0 9rpx 0;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						min-height: 150rpx;

						.shopName {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 34rpx;
						}

						.priceBox {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.priceIcon {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #D72A2A;
							}

							.price {
								font-size: 32rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #D72A2A;
							}
						}


					}
				}
			}
		}


	}
	.emptyBox {
		width: 100%;
		height: 50vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	
		.emptyText {
			font-size: 32rpx;
			color: #999999;
			margin-top: 20rpx;
		}
	
		.emptyIcon {
			width: 20%;
	
		}
	}
</style>